<template>
    <div>
        <bread-crumb></bread-crumb>
        <h1>成绩分析</h1>
        <el-row>
            <el-col :span="8" :offset="6">
                <el-input placeholder="请输入学号" v-model.trim="stu_id"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button @click="getChartsData">分析成绩</el-button>
            </el-col>
        </el-row>
        <div class="stu_name">学生的姓名:{{ stu_name }}</div>
        <div class="echartsAnalysis">
            <el-row>
                <el-col :span="8">
                    <div id="main" style="width: 90%; height: 90%"></div>
                </el-col>
                <el-col :span="8">
                    <div id="chineseChart" style="width: 90%; height: 90%"></div>
                </el-col>
                <el-col :span="8">
                    <div id="englishChart" style="width: 90%; height: 90%"></div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <div id="mathChart" style="width: 90%; height: 90%"></div>
                </el-col>
                <el-col :span="8">
                    <div id="lizongChart" style="width: 90%; height: 90%"></div>
                </el-col>
                <el-col :span="8">
                    <div id="wenzongChart" style="width: 90%; height: 90%"></div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import {
    req_entry_grade,
    req_mid_grade,
    req_end_grade,
} from "@/api/gradeInfo.js";
import { stacked, basisLine } from "@/utils/chartsClass.js";
export default {
    mounted() { },
    data() {
        return {
            stu_id: "",
            stu_name: "",
        };
    },
    methods: {
        async getChartsData() {
            // 获取到三次考试的成绩
            let result_entry = await req_entry_grade(this.stu_id);
            let result_mid = await req_mid_grade(this.stu_id);
            let result_end = await req_end_grade(this.stu_id);
            this.stu_name = result_entry.data[0].stu_name;
            // console.log(result_entry.data, result_mid.data, result_end.data);
            // 根据学号请求回来三次考试的成绩
            let gradeClass = ["chinese", "english", "math", "lizong", "wenzong"];
            let entryData = [];
            let midData = [];
            let endData = [];

            //  经过对echarts折现堆叠图的分析
            // 数据处理  按照语文", "英语", "数学", "理综", "文综  变为数组
            console.log(result_entry.data[0], result_mid.data[0], result_end.data[0]);
            // 从后台拿到的数据都是[{}]  ---->[]
            // 入学是这种方式处理   期中 期末是不是也都是这种格式
            for (let i = 0; i < gradeClass.length; i++) {
                // 入学成绩处理的结果 目的是得到  放到到echarts堆叠图当中的入学成绩的值
                getGradeData(gradeClass[i], result_entry.data[0], entryData);

                // 期中成绩处理的结果 目的是得到  放到到echarts堆叠图当中的期中成绩的值
                getGradeData(gradeClass[i], result_mid.data[0], midData);

                //  期末成绩处理的结果 目的是得到  放到到echarts堆叠图当中的期末成绩的值
                getGradeData(gradeClass[i], result_end.data[0], endData);
            }

            // gradeItem 参数：语文", "英语", "数学", "理综", "文综
            // gradeData  从服务器请求回来的数据result_entry.data[0], result_mid.data[0], result_end.data[0]
            // scoreData  放到echarts堆叠图当中的值 []
            function getGradeData(gradeItem, gradeData, scoreData) {
                for (let key in gradeData) {
                    if (key == gradeItem) {
                        scoreData.push(gradeData[key]);
                    }
                }
            }

            console.log(entryData, midData, endData);
            // 堆叠图是获取成绩之后产生图
            // this.getMainChart(entryData, midData, endData);
            // stacked是从utils中封装的堆叠图模块
            stacked(this, "main", entryData, midData, endData);

            function score(
                that,
                containerId,
                subject,
                gradeEntry,
                gradeMid,
                gradeEnd,
                subjectItem
            ) {
                let gradeSubject = [];
                gradeSubject.push(gradeEntry[subjectItem]);
                gradeSubject.push(gradeMid[subjectItem]);
                gradeSubject.push(gradeEnd[subjectItem]);
                basisLine(that, containerId, subject, gradeSubject);
            }
            // 获取语文的成绩分析图
            score(
                this,
                "chineseChart",
                "语文",
                result_entry.data[0],
                result_mid.data[0],
                result_end.data[0],
                "chinese"
            );
            // 获取英语的成绩分析图
            score(
                this,
                "englishChart",
                "英语",
                result_entry.data[0],
                result_mid.data[0],
                result_end.data[0],
                "english"
            );

            //获取数学的成绩分析图
            score(
                this,
                "mathChart",
                "数学",
                result_entry.data[0],
                result_mid.data[0],
                result_end.data[0],
                "math"
            );
            //获取理综的成绩分析图
            score(
                this,
                "lizongChart",
                "理综",
                result_entry.data[0],
                result_mid.data[0],
                result_end.data[0],
                "lizong"
            );
            score(
                this,
                "wenzongChart",
                "文综",
                result_entry.data[0],
                result_mid.data[0],
                result_end.data[0],
                "wenzong"
            );
        },
    },
};
</script>

<style lang="scss" scoped>
div {
    div {
        height: 30px;
    }

    .stu_name {
        margin: 30px 0;
        font-size: 20px;
        font-weight: 700;
    }

    .echartsAnalysis {
        div {
            height: 300px;
        }
    }
}
</style>